<script setup>
import { ref, onMounted } from 'vue'
import { airspaceResourcesServer } from '@/api'
const list = ref([
  {
    name: '适飞空域面积',
    value: 48,
    unit: 'km²'
  },
  {
    name: '适飞空域占比',
    value: 10,
    unit: '%'
  },
  {
    name: '区域航线总数',
    value: 32,
    unit: '条'
  },
  {
    name: '区域起降点',
    value: 87,
    unit: '个'
  }
])

//获取空域资源
const totalTime = ref(0)
const totalNum = ref(0)
const getAirspaceResources = async () => {
  const res = await airspaceResourcesServer()
  const { flyCount, flyHour, suitArea, suitAreaRatio, lineCount, landPointCount } = res.data
  totalNum.value = flyCount
  totalTime.value = flyHour
  list.value[0].value = suitArea
  list.value[1].value = suitAreaRatio * 100
  list.value[2].value = lineCount
  list.value[3].value = landPointCount
}

onMounted(() => {
  getAirspaceResources()
})
</script>
<template>
  <div class="card">
    <div class="top">
      <p>
        <span>飞行架次总数</span>
        <span><NumberAnimate :count="totalNum" :decimals="0" /><i>/次</i></span>
      </p>
      <p>
        <span>飞行总时长</span>
        <span><NumberAnimate :count="totalTime" :decimals="0" /><i>/h</i></span>
      </p>
    </div>
    <CommonTitle title="空域资源数据" />
    <div class="kyzy">
      <p v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
        <span
          ><NumberAnimate :count="item.value" :decimalPlaces="index === 0 ? 2 : 0" />
          <i>/{{ item.unit }}</i></span
        >
      </p>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 20px;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-left: 10px;
    p {
      position: relative;
      width: 172px;
      height: 102px;

      &:first-child {
        background: url('@img/overview/flytime_bg.png');
        background-size: 100% 100%;
      }

      &:last-child {
        background: url('@img/overview/flynum_bg.png');
        background-size: 100% 100%;
      }

      > span:first-child {
        position: absolute;
        top: 10px;
        left: 68px;
      }

      > span:last-child {
        position: absolute;
        top: 40px;
        left: 70px;
        font-size: 18px;

        i {
          color: #2f9cff;
          font-size: 14px;
          margin-left: 3px;
          vertical-align: middle;
          font-style: normal;
        }
      }
    }
  }

  .kyzy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;

    p {
      margin: 8px 5px;
      padding-left: 54px;
      display: flex;
      width: 165px;
      height: 48px;
      flex-direction: column;

      &:nth-child(1) {
        background: url('@img/overview/kyzy_icon01.png') no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(2) {
        background: url('@img/overview/kyzy_icon02.png') no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(3) {
        background: url('@img/overview/kyzy_icon03.png') no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(4) {
        background: url('@img/overview/kyzy_icon04.png') no-repeat;
        background-size: 100% 100%;

        > span:first-child {
          margin-top: 3px;
        }
      }

      > span:first-child {
        color: #85b9cb;
        font-size: 16px;
      }

      > span:last-child {
        font-size: 23px;
        display: flex;
        align-items: flex-end;

        i {
          font-weight: normal;
          font-style: normal;
          color: #2f9cff;
          margin-left: 5px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
